<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 600px;
			overflow: hidden;
			position: relative;
			margin: 20px auto;
		}

		ul,
		ol {
			list-style: none
		}

		ul {
			width: 700%;
			overflow: hidden;
			background-color: red;
			position: relative;


		}


		li {
			float: left;
			width: 600px;
		}

		img {
			width: 100%;
			display: block;
		}

		.arrow {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			height: 40px;
			line-height: 40px;
			width: 100%;
			text-align: center;
			font-size: 20px;
			color: #fff;
			display: none
		}

		.arrow .left,
		.arrow .right {
			width: 40px;
			border-radius: 50%;
			position: absolute;

			background-color: red;
		}

		.left {
			left: 0;
		}

		.right {
			right: 0;
		}

		ol {
			overflow: hidden;
			position: absolute;
			right: 20px;
			bottom: 10px;


		}

		ol li {
			float: left;
			margin: 6px;
			width: 20px;
			height: 20px;
			line-height: 20px;
			border-radius: 50%;
			/* border: 1px solid #ccc; */
			background-color: #ccc;

			text-align: center;
			color: #fff;




		}

		.current {
			background-color: red;
		}
	</style>



</head>

<body>


	<div class="box">
		<ul>
			<li>
				<img src="./images/1.jpg" alt="">
			</li>
			<li>
				<img src="./images/2.jpg" alt="">
			</li>
			<li>
				<img src="./images/3.jpg" alt="">
			</li>
			<li>
				<img src="./images/4.jpg" alt="">
			</li>
			<li>
				<img src="./images/5.jpg" alt="">
			</li>


		</ul>

		<div class="arrow">
			<!-- 左右箭头点击 -->
			<span class="left">&lt;</span>
			<span class="right">&gt;</span>
		</div>

		<ol>
			<!-- 小圆点 -->


		</ol>


	</div>


	<script src="./jquery.min.js"></script>

	<script>


		/*
		
		   0  动态生成小圆点
		  一  鼠标移入图片 左右小箭头显示 离开的时候左右小箭头隐藏
		  二  点击左右小箭头实现图片滚动
		  三  点击小圆点 实现图片滚动(并且当前小圆点高亮)
		  四  自动轮播 
		  五  鼠标移入图片 停止自动轮播 离开的时候开启自动轮播        
		*/

		$(function () {
			var boxW = $('.box').outerWidth();
			var count = 0 // 全局左右箭头图片初始值
			var timeId=null;
			var circle=0; // 小圆点初始值





			// 0  动态生成小圆点
			$('.box>ul>li').each(function (index) {
				$('ol').append($(`<li>${index + 1} </li>`))
			})

			$('ol>li').eq(0).addClass('current')

			//   1 鼠标移入图片 左右小箭头显示 离开的时候左右小箭头隐藏
			// 五  鼠标移入图片 停止自动轮播 离开的时候开启自动轮播    
			$('.box').hover(function () {
				//移入显示
				$('.arrow').show(100)
				clearInterval(timeId)

			}, function () {
				//离开隐藏
				$('.arrow').hide(100)
				timeId=setInterval(function() {
			//   $('.right')[0].click()  //原生的方法 
			  $('.right').trigger('click')  //jquery 的方法 自动触发事件
		},1000)


			})





			// //   二  点击左右小箭头实现图片滚动
			var newLi = $('ul>li').eq(0).clone(true);
			//   console.log(newLi[0])
			$('ul').append(newLi)

         //右箭头
			$('.arrow').on('click', '.right', function () {
				var lisLeg = $('ul>li').length;
				console.log(lisLeg)


				if (count == lisLeg - 1) {
					count = 0
					$('.box>ul').css({ 'left': 0 })
				}
				console.log(count)
				count++;



			



				$('.box>ul').stop().animate({
					left: -boxW * count
				})

				// 小圆点跟随高亮
			
				circle++;
				if(circle == lisLeg - 1) {
					circle = 0
				}
				changeIndex(circle)
				
			})



			//左箭头
			$('.arrow').on('click','.left',function() {
				var lisLeg = $('ul>li').length;
				console.log(lisLeg)  //6
				if (count == 0) {
					// alert(1)
					count = lisLeg - 1;
					console.log(count)  //5

					$('.box>ul').css({ 'left': -boxW * count })
					
					
				}
				count--; 
				$('.box>ul').stop().animate({
					'left': -boxW * count
				})

				if(circle == 0) {
					circle = lisLeg - 1;
				}
			
				circle--;
				
				changeIndex(circle)


			})




			// 三  点击小圆点 实现图片滚动(并且当前小圆点高亮)

        $('ol').on('click','li',function() {
			// alert(2)
			var currentIndex=$(this).index();

			circle=currentIndex;
			count=currentIndex;

			// $(this).addClass('current').siblings('li').removeClass('current')
			$(this).addClass('current').siblings().removeClass('current') //切换当前高亮
		
		
		
			$('.box>ul').stop().animate({
					'left': -boxW * currentIndex
				})
		})








		// 四  自动轮播 

		  timeId=setInterval(function() {
			//   $('.right')[0].click()  //原生的方法 
			  $('.right').trigger('click')  //jquery 的方法 自动触发事件
		},1000)


		})





		function changeIndex(gaoliang) {
		$('ol>li').eq(gaoliang).addClass('current').siblings().removeClass('current') //切换当前高亮
		}



	</script>
</body>

</html>